<!--  -->
<template>
  <div class="info">
    <div class="J-weixin-tip weixin-tip">
      <div class="weixin-tip-content">请在菜单中选择在浏览器中打开,
        <br>以完成支付
      </div>
    </div>
    <div class="J-weixin-tip-img weixin-tip-img"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {}, 
  watch: {},
  methods: {
    refresh() {
      if(this.$route.query.wxr){
        let url = location.href.replace(/\?wxr=[0-9]{13}/g, '');
        window.history.replaceState({}, document.title, url);
        return
      }
      // 在链接后加一个随机参数 wxr，以解决 ios 复制链接的问题
      let wxr = "wxr=" + new Date().getTime();
      let url =window.location.href
      if (location.search) {
        url = url + "&" + wxr;
      } else {
        url = url + "?" + wxr;
      }
      window.location.replace(url);
    }
  },
  created() {},
  mounted() {
   
 
    if (location.hash.indexOf("error") != -1) {
      alert("参数错误，请检查");
    } else {
      var ua = navigator.userAgent.toLowerCase();
      var tip = document.querySelector(".weixin-tip");
      var tipImg = document.querySelector(".J-weixin-tip-img");
      if (ua.indexOf("micromessenger") != -1) {
        tip.style.display = "block";
        tipImg.style.display = "block";
        if (
          ua.indexOf("iphone") != -1 ||
          ua.indexOf("ipad") != -1 ||
          ua.indexOf("ipod") != -1
        ) {
          tipImg.className = "J-weixin-tip-img weixin-tip-img iphone";
          this.refresh()
        } else {
          tipImg.className = "J-weixin-tip-img weixin-tip-img android";
        }
      } else {
        window.location.replace(this.$route.params.url);
      }
    }
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.weixin-tip-content {
  font-size: 16px;
  line-height: 20px;
}
.weixin-tip {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 15px;
  right: 20px;
  width: 265px;
  padding: 55px 0 0;
  text-align: left;
  background: url()
    no-repeat right top;
  background-size: 45px 68px;
}

.weixin-tip-img {
  padding: 110px 0 0;
}

.weixin-tip-img::after {
  display: block;
  margin: 15px auto;
  content: " ";
  background-size: cover;
}

.weixin-tip-img.iphone::after {
  width: 150px;
  height: 150px;
  background-image: url();
}

.weixin-tip-img.android::after {
  width: 173px;
  height: 240px;
  background-image: url();
}
</style>